<template>
  <div class="body">
    <div class="content">
      <DtUserForm ref="userFormRef" :auth="auth" />
    </div>
    <div class="button">
      <span class="button">
        <el-button v-show="!$attrs['confirm-hidden']" v-preventReClick="3000" type="primary"
                   size="small" :loading="isLoading" class="comfirmBtn"
                   @click="comfirmBtn">
          保 存
        </el-button>
        <el-button v-show="!$attrs['cancel-hidden']" class="cancalBtn" size="small"
                   @click="cancalBtn">
          取 消
        </el-button>
      </span>
    </div>
  </div>
</template>
<script>
import idNumberVerificationApi from '@/framework/api/userCenter/idNumberVerification'
import DtUserForm from '../userManage/components/dt-userForm'
import sysUserApi from '@/framework/api/userCenter/sysUser'
import { encryption } from 'DQBasic-vue-component'

export default {
  components: { DtUserForm },
  data() {
    return {
      isLoading: false,
      auth: false
    }
  },
  created() {
    this.initData()
    this.getAuthidcard()
  },
  methods: {
    getAuthidcard() {
      idNumberVerificationApi.getAuthidcard().then((res) => {
        this.auth = res.data
      })
    },
    initData() {
      this.$nextTick(() => {
        this.$refs.userFormRef.openForm('', 'create')
      })
    },
    comfirmBtn() {
      this.$refs.userFormRef.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          this.isLoading = true
          try {
            const temp = encryption({
              data: this.$refs.userFormRef.temp
            })
            await sysUserApi.add(temp)
            this.$dtMessage({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.isLoading = false
            this.$refs.userFormRef.reset()
          } catch (error) {
            this.isLoading = false
          }
        }
      })
    },
    cancalBtn() {
      this.$refs.userFormRef.reset()
    }
  }
}
</script>
<style lang="scss" scoped>
.body{
  background-color: #fff;
  padding: 40px;
  .content{
    margin: 0 auto;
    width: 50%;
    ::v-deep .title{
      margin-bottom: 16px;
    }
  }
  .button{
    display: flex;
    margin: 0 auto;
  }
}
::v-deep .el-form-item{
  margin-bottom: 24px;
}
</style>
